<template>
  <div style="padding: 20px">
    <tableHeader />
    <el-card>
      <div class="business_info">
        <!-- 企业详情 -->
        <el-card class="business_info-card lg-mb-20">
          <template #header>
            <div class="card-header">
              <span>售后人员详情</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <div class="detail">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="售后人员名称">
                    {{ staff.single.name }}</el-descriptions-item
                  >
                  <el-descriptions-item label="联系电话">
                    {{ staff.single.phone }}
                  </el-descriptions-item>
                  <!-- <el-descriptions-item label="资质证明">
                    <el-image
                      style="width: 30%; height: 30%"
                      :src="staff.single.qualification"
                      fit="fill"
                      :preview-src-list="[staff.single.qualification]"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="个人登记照片">
                    <el-image
                      style="width: 50%; height: 50%"
                      :src="staff.single.photo"
                      fit="fill"
                      :preview-src-list="[staff.single.photo]"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="身份证">
                    <el-image
                      style="width: 20%; height: 20%"
                      :src="staff.single.idPhoto"
                      fit="fill"
                      :preview-src-list="[staff.single.idPhoto]"
                    />
                    <el-image
                      style="width: 20%; height: 20%"
                      :src="staff.single.idPhotoBack"
                      fit="fill"
                      :preview-src-list="[staff.single.idPhotoBack]"
                    />
                  </el-descriptions-item> -->
                </el-descriptions>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 工单列表 -->
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="business_devices-card lg-mb-20">
              <template #header>
                <div class="card-header">
                  <span>维护工单</span>
                </div>
              </template>
              <Order />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12">
            <el-card class="business_devices-card lg-mb-20">
              <template #header>
                <div class="card-header">
                  <span>巡检任务</span>
                </div>
              </template>
              <Task />
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, onMounted, ref, provide } from "vue";
import { useRouter } from "vue-router";
import tableHeader from "./tableHeader.vue";
import { useBusiness } from "@/store/backend/BusinessM/info";
import Order from "./order.vue";
import Task from "./task.vue";
import { useStaff } from "@/store/backend/ServiceM/staff";

const router = useRouter();
const business = useBusiness();
const staff = useStaff();

const size = ref("");
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap.default,
  };
});
interface anyObj {
  [key: string]: any;
}
const state: {
  deviceList: anyObj;
  currentPage: number;
  pageSize: number;
  total: number;
  type: string; //经营分类
} = reactive({
  deviceList: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
  type: "",
});

type DeviceItem = {
  avatar: string;
  equipid: number;
  morestatus: number;
  name: string;
  status: number;
};

onMounted(() => {});

provide("staff", staff);
</script>
<style lang="scss" scoped>
.business_info {
  &-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .business_devices-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.lg-mb-20 {
  margin-bottom: 20px;
}
</style>
